/**
* @Description: 通信网管巡视工单审核
* @author zhangxia
* @returns {string}
*/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back title="通信网管巡视工单审核" @goBack="goBack">
			<img slot="iconfont" :src="iconUrl" alt="" @click="changeApprovalStatus">
		</nav-bar>

		<view class="header-bar">
			<!-- 切换tab -->
			<div class="get-state-tab">
				<div class="info-tab-item" :class="currentTab === 'non-executed' ? ' info-tab-current': ''"
					@click="tabChange('non-executed')">待审核的</div>
				<div class="info-tab-item" :class="currentTab === 'executed' ? ' info-tab-current': ''"
					@click="tabChange('executed')">我审核的</div>
			</div>
		</view>

		<view class="main-container">
			<!-- 搜索框  -->
			<view class="search">
				<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
					placeholder="搜索" @click="showSearch=true" @cancel="onSearch('')" />
			</view>
			<view :class="isChoosable ? 'task-list-container': 'task-list-container task-list-container-not-submit'"
				v-if="taskList.length > 0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<!-- 列表循环   -->
						<view class="task-list" v-for="(item,index) in taskList" :key="index" @click.stop="jump(item)">
							<view class="task-top">
								<van-checkbox @click.self="clickCheckBox" style="margin-right: 5px;" v-if="isChoosable"
									v-model="item.isChecked" />
								<text class="equip-title">{{ item.inspectionDay }} {{item.name }} </text>
								<!--  0-待审批 2 审批通过  1 审批拒绝 -->
								<text class="equip-state-wc" v-if="item.approveState === '0'">
									待执行
								</text>
								<text class="equip-state-zxz" v-else-if="item.approveState === '1'">
									待审批
								</text>
								<text class="equip-state-wzx" v-else-if="item.approveState === '2'">
									已完成
								</text>
							</view>
							<hr class="patrol-hr">
							<ul class="task-list-main">
								<li>
									<text class="task-title">网管执行人员：</text>
									<text class="task-titles">{{ item.expertName }}</text>
								</li>
								<li>
									<text class="task-title">运维专责：</text>
									<text class="task-titles">{{ item.executiveName }}</text>
								</li>
							</ul>
							<hr class="task-dash-hr">
							<view class="top-task-main inspectionList">
								<view v-for="(item1,index) in item.inspectionList" :key="index" :class="item1.inspectionState == '0' ? 'inspectionItem state-kzx' : item1.inspectionState == '1' ? 'inspectionItem state-ywc' : item1.inspectionState == '2' ? ' inspectionItem state-yyq' : ' inspectionItem state-dzx'  ">
									<text class="type">{{item1.inspectionNum}}</text>{{item1.time}}<text></text>
								</view>
							</view>
						</view>
					</van-list>
				</van-pull-refresh>
			</view>

			<view v-if="isChoosable" class="submit-wrap">
				<van-button block native-type="submit" @click="goApproval">审批</van-button>
			</view>
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>

		<!-- 弹出审批页 -->
		<van-popup closeable :close-on-click-overlay="false" v-model="showApproval" position="bottom">
			<Approval @submitApproval="examineSeal" :isChangeRadio="false"></Approval>
		</van-popup>

	</view>
</template>

<script>
	import navBar from "../../../components/common/nav-bar";
	import searchEquMatch from '../../common/searchEquMatch'
	import plateTitle from '../../../components/business/plateTitle.vue';
	import Approval from '../common/toApprove.vue'
	import {
		mapGetters
	} from "vuex";
	import moment from "moment";
	import {
		Dialog
	} from "vant";
	import screenPopup from "../common/screenPopup2.vue";

	export default {
		name: "taskMonitor",
		components: {
			navBar,
			searchEquMatch,
			plateTitle,
			Approval,
			screenPopup
		},
		data() {
			return {
				iconUrl: require("../../../static/img/batch.png"),
				searchValue: "",
				page: this.page,
				limit: this.limit,
				handle: this.currentIndex,
				
				updateName: this.searchValue,
				taskType: '',
				currentTab: "non-executed",
				showSearch: false,
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				approvalPage: 1,
				approvalLimit: 20,
				current: 0, // 当前选中的任务类型tab
				menuList: [{
						title: '全部',
						value: '0'
					},
					{
						title: '待审批',
						value: '1'
					},
					{
						title: '审批通过',
						value: '2'
					},
					{
						title: '审批拒绝',
						value: '3'
					}
				], // tab切换的列表
				isRefresh:false,
				page: "1",
				limit: "10",
				taskList: [],
				currrentTaskState: '', // 当前选中的任务类型（供请求使用），默认为全部
				isChoosable: false, // 是否可进行选择
				showApproval: false, // 展示审批弹窗
				typeList: [{
						TITLE: '本周',
						VALUE: 1,
					},
					{
						TITLE: '本月',
						VALUE: 2,
					},
					{
						TITLE: '上月',
						VALUE: 3,
					}
				],
				otherList: [{
						TITLE: '按天',
					},
					{
						TITLE: '按月',
					}
				],
				showScreen: false,
				timeType: 1,
				startTime: '',
				endTime: '',
				currentIndex:"0",
			};
		},
		onLoad() {
			this.getSealList();
		},
		onShow() {
			if(this.isRefresh == true){
				this.onRefresh()
			}
			
		},
		computed: {
			...mapGetters(['userData', 'roleAuth']),
		},
		methods: {
			tabChange(currentTab) {
				this.allList = [];
				this.currentTab = currentTab;
				(currentTab === "executed") && (this.currentIndex = '1');
				(currentTab === "non-executed") && (this.currentIndex = '0');

				this.onRefresh()
			},
			//  筛选弹框
			screen() {
				this.showScreen = true;
			},
			confirmCondition(selected, startTime, endTime) {
				this.timeType = selected;
				this.startTime = startTime;
				this.endTime = endTime;
				this.onRefresh()
			},
			reset(selected, startTime, endTime) {
				this.timeType = selected;
				this.startTime = startTime;
				this.endTime = endTime;
				this.onRefresh()
			},
			clickCheckBox() {
			},
			goApproval() {
				let checkedTask = this.taskList.filter(item => item.isChecked);
				if (checkedTask.length === 0) return;
				this.showApproval = true;
			},
			examineSeal({
				radio,
				determineResult
			}) { // 审批组件点击确认事件
				let params = {
					"userId": this.userData.USERID, // 是	string	登录用户ID
					"username": this.userData.SUERNAME, // 是	string	登录用户名称
					"modeType" : "WGXS" ,
					"explain": determineResult,
					"ids": this.taskList.reduce((prev, item) => {
						if (item.isChecked) {
							prev.push(item.inspectionDay)
						}

						return prev;
					}, []),
				}

				this.$api.examineSeal(params).then(res => {
					if (res.code === 0) {
						Dialog.alert({
							message: "审批成功"
						}).then(() => {
							this.showApproval = false;
							this.onRefresh();
							uni.navigateBack()
						});
					}
				})
			},
			changeApprovalStatus() {
				if (!this.isChoosable) {
					this.isChoosable = true;
					this.iconUrl = require('../../../static/img/cancel.png');
					// this.chooseText = "取消"
				} else {
					this.isChoosable = false;
					this.iconUrl = require('../../../static/img/batch.png');
					// this.chooseText = "批量审批"
				}
			},
			chooseMenu(item, index) {
				this.current = index
				this.currrentTaskState = item.taskState;
				this.iconUrl = require('../../../static/img/batch.png');
				// this.chooseText = '批量审批';
				this.isChoosable = false;
				this.onRefresh()
			},
			// 获取审批列表
			getSealList() {
				let params = {
					page: this.approvalPage,
					limit: this.limit,
					userId: this.userData.USERID,
					name: this.searchValue,
					inspectionState: this.currentIndex*1+1,
					modelType:'2'
				}
				
				this.$api.selectWGWaitHandleList(params).then(res => {
				  this.isLoading = false;
				  this.refreshing = false;
				  const backlogList = res.data.waitHandleList;
				  
				  backlogList.forEach((item)=>{
				  	// this.processingData(item)
				  	item.inspectionList.forEach((item1)=>{
				  		item1.time = moment(item1.inspectionStartDate).format("H:m");
				  	})
				  })
				  this.taskList = this.taskList.concat(backlogList);
				  this.total = +res.data.total
				})
			},

			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.approvalPage = 1;
				this.taskList = [];
				this.getSealList();
			},
			loadMore() {
				if (this.total > this.taskList.length) {
					this.approvalPage = this.approvalPage + 1;
					this.getSealList();
				} else {
					this.finished = true;
				}
			},
			onSearch(searchValue) {
				this.searchValue = searchValue;
				this.onRefresh();
				this.showSearch = false;
			},
			goBack() {
				uni.navigateTo({
					url: '/pages/operationApprove/index/index'
				})
			},
			jump(item) {
				if (this.isChoosable) return; // 如果目前处于批量状态，则不能单个审批
				uni.navigateTo({
					url: `/pages/operationApprove/communicationNetWorkPerson/networkTeamIncomplete?date=${item.inspectionDay}&status=${item.approveState
}`
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.task-monitor-main {
		min-height: 100vh;
		background: #F2F6FA;

		.header {
			position: sticky;
			top: 0;

			.icon-ic-wrap {
				width: px2vw(48);
				height: px2vw(48);
			}

			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}

			.header-right {
				display: flex;

				/deep/ .van-icon {
					font-size: px2vw(52);
					font-weight: bold;
				}

				/deep/ .van-icon-scan {
					margin-right: px2vw(12);
				}

				/deep/ .van-icon-filter-o {
					margin-left: px2vw(12);
				}
			}
		}

		.header-bar {
			// height: px2vh(120);
			// border-radius: 0 0 px2vh(40) px2vh(40);
			// background: #417ADC;
			// margin-bottom: px2vh(130);
			flex-shrink: 0;
			height: px2vh(220);
			// border-radius: 0 0 px2vh(40) px2vh(40);
			background: #417ADC;
			overflow: hidden;
			margin-top: px2vh(-1);

			.get-state-tab {
				width: calc(100% - #{px2vw(60)});
				height: px2vh(120);
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(37);
				background-color: rgba(255, 255, 255, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
				border: px2vw(1) solid rgba(198, 215, 245, 1);

				.info-tab-item {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(255, 255, 255, 1);
					font-weight: bold;
					font-size: px2vw(38);

					&.info-tab-current {
						height: px2vh(100);
						margin: 0 px2vw(10);
						margin-right: px2vw(10);
						border-radius: px2vw(20);
						background-color: rgba(255, 255, 255, 0.7);
						color: rgba(65, 122, 220, 1);
						font-weight: Bold;
					}
				}
			}
		}

		.main-container {
			height: calc(100vh - #{px2vh(413)});
			position: relative;

			.submit-wrap {
				width: calc(100vw - #{px2vw(60)});
				padding: px2vh(0) px2vw(30);
				text-align: center;
				position: fixed;
				bottom: 20px;

				/deep/ .van-button {
					width: 100%;
					height: px2vh(120);
					color: #fff;
					background-color: #417ADC;
					border: 1px solid #417ADC;
					border-radius: px2vh(60);
				}
			}

			.search {
				width: px2vw(1020);
				height: 38px;
				margin: px2vw(30) px2vh(30);
				border-radius: px2vw(20);
				overflow: hidden;

				.van-search {
					padding: 0 0;
					height: 38px;
				}

				.van-search__content {
					background: #fff;
					height: 38px;
				}

				/deep/ .van-field__control {
					height: 30px;
				}
			}

			.screen-type-item {
				margin-bottom: px2vh(30);

				.plate-title {
					margin-bottom: px2vh(36);
				}

				.screen-option-container {
					display: flex;
					//justify-content: space-between;
					flex-wrap: wrap;

					.screen-option-item {
						width: px2vw(260);
						height: px2vh(90);
						margin-bottom: px2vh(20);
						line-height: px2vh(90);
						background: #f7f7f7;
						color: #666;
						font-size: px2vh(36);
						text-align: center;
						border-radius: $border-radius-base;
					}

					.screen-option-item:not(:nth-child(3n)) {
						margin-right: px2vw(20);
					}

					.screen-option-item.active {
						background: #ecf1fb;
						color: #417ADC;
					}
				}
			}

			.task-list-container {
				height: calc(100vh - #{px2vh(443)} - 38px - #{px2vh(165)});
				overflow: auto;
				position: relative;

				&.task-list-container-not-submit {
					height: calc(100vh - #{px2vh(443)} - 38px);
				}

				.task-list {
					width: px2vw(1020);
					padding-bottom: px2vh(30);
					//min-height: px2vh(416);
					//padding-bottom: px2vh(20);
					background: #fff;
					border-radius: px2vw(20) px2vh(20);
					margin-top: px2vh(30);
					margin-left: px2vw(30);
					margin-bottom: px2vh(30);

					.task-top {
						width: calc(100% - #{px2vw(80)});
						margin-left: px2vw(40);
						height: px2vh(140);
						display: flex;

						img {
							width: px2vw(64);
							height: px2vw(64);
							margin-top: px2vh(40);
							float: left;
						}

						.equip-title {
							color: #333;
							font-size: px2vw(48);
							// width: px2vw(670);
							height: px2vh(48);
							line-height: px2vh(48);
							float: left;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: px2vh(48);
							// margin-left: px2vw(25);
						}
						/deep/.van-checkbox__icon{
							width: px2vh(65);
						}
						.equip-state-wc,
						.equip-state-wzx,
						.equip-state-zxz {
							display: flex;
							justify-content: center;
							align-items: center;
							width: px2vw(150);
							height: px2vh(50);
							font-size: px2vw(32);
							border-radius: px2vw(10);
							margin-top: px2vh(48);
							margin-left: px2vw(27);
							float: left;
							line-height: px2vh(50);
							//text-align:center;
						}

						.equip-state-wc {
							color: #417ADC;
							background: rgba(140,140,140,0.1);
						}

						.equip-state-wzx {
							color: #3CDA68;
							background: rgba(62, 218, 104, 0.1);

						}

						.equip-state-zxz {
							color: #FFAD0E;
							background: rgba(255, 180, 0, 0.1);
						}
					}

					.patrol-hr {
						width: px2vw(940);
						border: px2vh(1) solid #e5e5e5;
						margin-left: px2vw(40);
					}
				}

				.task-list-main {
					width: px2vw(940);
					//height: px2vh(266);
					margin-left: px2vw(40);
					padding-bottom: px2vh(30);

					li {
						margin-top: px2vh(30);
						font-size: px2vw(36);

						.task-title {
							color: #666;
						}

						.task-titles {
							color: #333;
						}
					}
				}
				.task-dash-hr{
					width: px2vw(940);
					border: px2vh(2) dashed #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
					position: relative;
					::before{
						content: "";
						width: 36px;
						height: 36px;
						position: absolute;
						display: inline-block;
						left: -17px;
						top: -17px;
						background-color: #F2F6FA;
					}
					::right{
						content: "";
						width: 36px;
						height: 36px;
						position: absolute;
						display: inline-block;
						right: -17px;
						top: -17px;
						background-color: #F2F6FA;
					}
				}
				.top-task-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);
				
					.task-big-ltitle,
					.task-big-rtitle {
						color: #666;
					}
				
					.task-small-ltitle,
					.task-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}
				
					.task-big-rtitle {
						margin-left: px2vw(245);
					}
				}
				.inspectionList{
					width: px2vw(940);
					margin: 0 auto;
					padding: 0 px2vh(35);
					// background: red;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.inspectionItem{
						width: px2vw(450);
						height: px2vh(74);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: px2vh(37);
						text-align: center;
						.type{
							margin-right: px2vh(20);
						}
					}
					.state-kzx{
						background-color: #417ADC;
						color: #FFFFFF;
					}
					.state-ywc{
						background-color: #1ADA6C;
						color: #FFFFFF;
					}
					.state-yyq{
						background-color: #FF6363;
						color: #FFFFFF;
					}
					.state-dzx{
						background-color: rgba(153,153,153,0.1);
						color: #999999;
					}
					
				}

				.task-hr {
					width: px2vw(940);
					border: 0;
					border-bottom: px2vh(6) dashed #e5e5e5;
					margin-top: px2vh(14);
					margin-left: px2vw(40);
				}

				.by {
					position: absolute;
					width: px2vw(40);
					height: px2vh(40);
					border-radius: px2vw(100);
					left: px2vw(12);
					float: left;
					background: #f2f6fa;
				}

				.byr {
					position: absolute;
					width: px2vw(40);
					height: px2vh(40);
					border-radius: px2vw(100);
					right: px2vw(12);
					float: right;
					background: #f2f6fa;
				}

				.bottom-patrol {
					width: px2vw(940);
					height: px2vh(54);
					margin-left: px2vw(40);
					margin-top: px2vh(26);
					font-size: px2vw(32);

					.left-bottom-patrol {
						display: flex;
						justify-content: center;
						align-items: center;
						min-width: px2vw(300);
						padding: 2px 4px;
						//height: px2vh(54);
						background: #ecf1fb;
						float: left;
						text-align: center;
						color: #417adc;
						border-radius: px2vw(8);
					}

					.right-bottom-patrol {
						width: px2vw(120);
						height: px2vh(54);
						float: right;

						.patrol-btn {
							width: px2vw(120);
							height: px2vh(54);
							background: #417adc;
							float: right;
							//border-radius: px2vw(20);
						}

						/deep/.van-button--normal {
							padding: 0;
						}
					}
				}
			}
		}
	}
</style>
